<!--
 * @Description:简易日历
 * @Author: Sun
 * @Date: 2019-07-01 20:05:50
 * @LastEditors: Sun
 * @LastEditTime: 2019-07-01 22:12:28
 -->
<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>简易日历</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			h2 {
				height: 20px;
			}

			p {
				height: 16px;
			}

			.active {
				background: darkorange;
			}

			ul {
				display: flex;
				width: 306px;
				flex-wrap: wrap;
			}

			.text {
				width: 306px;
				height: 60px;
				background: #F1F1F1;
			}

			ul li {
				list-style: none;
				width: 100px;
				height: 60px;
				border: 1px solid burlywood;
				text-align: center;
				line-height: 50px;
				font-size: 20px;
				background: #F1F1F1;
			}
		</style>
		<script>
			window.onload = function() {
				var arr=[
					"11arr",
					"22arr",
					"33arr",
					"44arr",
					"55arr",
					"66arr"
				]
				var odiv = document.getElementById("tab")
				var ali = odiv.getElementsByTagName("li")
				var otxt = odiv.getElementsByTagName("div")[0]
				for (let i = 0; i < ali.length; i++) {
					ali[i].index = i
					ali[i].onmouseover = function() {
						for (let i = 0; i < ali.length; i++) {
							ali[i].className = '';
						}
						this.className = 'active';
						otxt.innerHTML = `<h5>${this.index+1}月活动</h2><p>${arr[i]}</p>`
					}

				}
			}
		</script>
	</head>

	<body>
		<div id="tab" class="calendar">
			<ul>
				<li class="active">
					<h2>1</h2>
					<p>1'月'</p>
				</li>
				<li>
					<h2>1</h2>
					<p>2'月'</p>
				</li>
				<li>
					<h2>1</h2>
					<p>3'月'</p>
				</li>
				<li>
					<h2>1</h2>
					<p>4'月'</p>
				</li>
				<li>
					<h2>1</h2>
					<p>5'月'</p>
				</li>
				<li>
					<h2>1</h2>
					<p>6'月'</p>
				</li>
				<li>
					<h2>1</h2>
					<p>7'月'</p>
				</li>
				<li>
					<h2>1</h2>
					<p>8'月'</p>
				</li>
				<li>
					<h2>1</h2>
					<p>9'月'</p>
				</li>
				<li>
					<h2>1</h2>
					<p>10'月'</p>
				</li>
				<li>
					<h2>1</h2>
					<p>11'月'</p>
				</li>
				<li>
					<h2>1</h2>
					<p>12'月'</p>
				</li>
			</ul>

			<div class="text">
				<!-- <h5>1月活动</h2>
			<p>快过年了，大家商量一起怎么玩</p> -->
			</div>
		</div>


	</body>

</html>
